<template>
    <div class="menu-container">
        <el-menu router :default-active="$route.path" background-color="white" text-color="#222"
            active-text-color="#00CAA8">
            <el-menu-item v-for="(item, index) in navList" :key="index" :index="item.name">
                <i :class="item.icon"></i>
                {{ item.navItem }}
            </el-menu-item>
        </el-menu>
    </div>

</template>

<script>
export default {
    data() {
        return {
            navList: [
                { name: '/myInfo', navItem: '个人主页', icon: 'el-icon-user' },
                { name: '/myBooks', navItem: '我的商品', icon: 'el-icon-sell' },
                { name: '/myWallet', navItem: '钱包', icon: 'el-icon-wallet' },
                { name: '/myBuyOrder', navItem: '买的订单', icon: 'el-icon-s-order' },
                { name: '/mySellOrder', navItem: '卖的订单', icon: 'el-icon-s-order' },
                { name: '/changePassword', navItem: '修改密码', icon: 'el-icon-key' }
            ]
        }
    }
}
</script>

<style lang="scss">
.menu-container {
    border-radius: 20px;
    background-color: #fff;
    padding: 20px;
    .el-menu {
        border-right: none;
        .el-menu-item {
            border-radius: 10px;
        }
        .el-menu-item:hover {
            background-color: #F7F7F7 !important;
        }
    }
}


</style>